<template>
  <div class="app_card mt-3  pt-2  pb-5">
    <el-table stripe size="large" :data="dataOfTable" height="calc(100vh - 300px)" sortable="custom" @sort-change="handleSortChange" @selection-change="handleSelectionChange">
      <el-table-column fixed type="selection" width="50" />
      <el-table-column prop="name" label="教室" minWidth="150" />
      <el-table-column prop="state" label="使用状态" minWidth="100" />
      <el-table-column label="投影机" width="100">
        <template #default="scope">
          <el-switch size="large" disabled v-model="scope.row.onCamera" inline-prompt active-value="1" inactive-value="0" active-text="是" inactive-text="否" />
        </template>
      </el-table-column>
      <el-table-column label="一体机" width="100">
        <template #default="scope">
          <el-switch size="large" v-model="scope.row.onMachine" inline-prompt active-value="1" inactive-value="0" active-text="是" inactive-text="否" />
        </template>
      </el-table-column>
      <el-table-column label="功放" width="100">
        <template #default="scope">
          <el-switch size="large" v-model="scope.row.onPower" inline-prompt active-value="1" inactive-value="0" active-text="是" inactive-text="否" />
        </template>
      </el-table-column>
      <el-table-column label="音量" width="180">
        <template #default="scope">
          <el-progress :stroke-width="20" :percentage="scope.row.onVolume" />
        </template>
      </el-table-column>
      <el-table-column label="台式机" width="100">
        <template #default="scope">
          <el-switch size="large" v-model="scope.row.onComputer" inline-prompt active-value="1" inactive-value="0" active-text="是" inactive-text="否" />
        </template>
      </el-table-column>
      <el-table-column label="显示" width="100">
        <template #default="scope">
          <el-switch size="large" v-model="scope.row.onDisplay" inline-prompt active-value="1" inactive-value="0" active-text="是" inactive-text="否" />
        </template>
      </el-table-column>
      <el-table-column label="录播" width="100">
        <template #default="scope">
          <el-switch size="large" v-model="scope.row.onRecording" inline-prompt active-value="1" inactive-value="0" active-text="是" inactive-text="否" />
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="物联管理" width="120" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="onLink(scope.row)">跳转</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-2">
      <el-pagination background v-model:currentPage="queryParam.page" v-model:page-size="queryParam.pageSize" :page-sizes="paginationOption.pageSizes" :background="false" :layout="paginationOption.layout" :total="paginationOption.total" @size-change="handleChangeSize" @current-change="handleChangeCurrent" />
    </div>
  </div>
</template>

<script setup>
/**
 * 列表控制
 */
import { ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import useAuthStore from '@/stores/useAuthStore';



// ======================================================
//                      变量声明
// ======================================================
//emit
const emit = defineEmits(['goIot']);

const authStore = useAuthStore();
// 表格数据
const dataOfTable = ref([]);
// 表格查询参数
const queryParam = ref({
  q: '',
  search: '',
  orderby: '',
  group_id: 0,
  page: 1,
  pageSize: 10,
})
// 分页栏配置数据
const paginationOption = ref({
  layout: 'total, sizes, prev, pager, next, jumper',
  pageSizes: [10, 20, 50, 100, 500, 1000],
  total: 0,
})


// 表格多选数据
const multipleSelection = ref([]);










// 点击跳转
const onLink = (row) => {
  emit('goIot');
}

// ======================================================
//                      处理事件
// ======================================================

// 处理表格全选
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 处理表格排序
const handleSortChange = (column) => {
  queryParam.value.orderby = column.prop + ' ' + (column.order == 'descending' ? 'desc' : 'asc');
  console.log(queryParam.value);
  loadData();
}

// 处理分页尺寸
const handleChangeSize = (val) => {
  console.log(`${val} items per page`);
  queryParam.value.page = 1;
  queryParam.value.pageSize = val;
  loadData();
}

// 处理页码
const handleChangeCurrent = (val) => {
  console.log(`current page: ${val}`)
  queryParam.value.page = val;
  loadData();
}

// ======================================================
//                      处理事件
// ======================================================

const loadData = (query) => {
  console.log('query===', query)
  // roomFault
  EsAjax.post(ApiUrls.buildingAll, queryParam.value).then(res => {
    console.error(res)
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    dataOfTable.value = res.data.data.data;
    paginationOption.value.total = res.data.data.total;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}


defineExpose({
  loadData
})

loadData();
</script>
<style lang="less">
</style>

